iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0
Modern Web

React鐵人先爆了再說系列 第 7

[07] 生命週期(Life Cycle)

  • 分享至 

  • xImage
  •  

前面有說過 React 的元件主要撰寫方式有兩種:

  • Functional 元件
  • Class 元件

Functional元件通常是在沒有自己內部狀態,不需要控制元件的生命週期時,使用Functional元件寫法比較單純,可以獲得比較好的效能。

而當需要進行比較複雜的操作和控制的元件生命週期時,就一定要使用Class元件的寫法,相對的一定比Functional元件消耗資源。

昨天對元件的屬性(Props)和狀態(State)的區別和用法進一步了解,今天再來看看元件的生命週期

生命週期(Life Cycle)

在React元件的設計中每個元件實際上都是有生命週期(Lifecycle)的設計,一般而言元件有以下三種生命週期的狀態:

  • 掛載 ( Mounting )
  • 更新 ( Updating )
  • 卸載 ( Unmounting )

生命週期也就是一個元件從一開始掛載(Mounting)到網頁上,然後呈現在網頁上,在網頁上因為事件的觸發進行更新(Updating)或重新渲染,最後從網頁上消失,稱為卸載(Unmounting)。

這些生命週期的階段,設計了一些方法讓開發者使用,在某個生命週期階段你可以利用這些方法,在裡面執行一些操作:

掛載 ( Mounting )

  • constructor():建構初始化
  • render():將元件內容輸出在網頁上
  • componentDidMount():元件內容輸出後會進行一次呼叫

更新 ( Updating )

  • render()
  • componentDidUpdate()
  • componentWillReceiveProps():已載入元件state值改變時呼叫
  • shouldComponentUpdate():元件判斷是否重新渲染時呼叫

卸載 ( Unmounting )

  • componentWillUnmount():元件被移除前呼叫

另外要注意執行setState、更新父元件傳送的props,都會執行render(),所以不建議在這邊render()執行setState,容易產生無限迴圈。


上一篇
[06] 屬性(Props) & 狀態(State)
下一篇
[08] TodoList程式
系列文
React鐵人先爆了再說8
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言